<template>
  <div class="fa-contract-popovers">
    <!-- 签章切换 -->
    <SignSelectPop
      v-if="type === PopoverType.SIGN_CHANGE && widget"
      :reference="ref"
      :type="changeSign.type"
      :data="changeSign.data"
      :draggable="false"
      :sign-class-name="signOptions.signClassName"
      :viewer="viewer"
      :widget="widget"
      @select="changeSign.change"
      @close="close"
    />

    <!-- 签章规格 -->
    <SignSpecPop
      v-if="type === PopoverType.SIGN_SPEC && widget"
      :data="widget"
      :options="signOptions"
      :reference="ref"
      @close="close"
    />

    <!-- 日期章设置 -->
    <DateSignSettingPop
      v-if="type === PopoverType.DATE_SIGN_SET && widget"
      :data="widget"
      :options="signOptions"
      :reference="ref"
      @change="dateSignSet.onChange"
      @close="close"
    />

    <!-- 批量应用 -->
    <BatchApply v-if="type === PopoverType.BATCH_APPLY && widget" :reference="ref" :widget="widget" @close="close" />

    <!-- 图片裁剪 -->
    <FaImageCropper
      v-if="type === PopoverType.IMAGE_CROP && widget"
      :file="widget.extra.file"
      containerSize="460,460"
      :size="`${widget.w},${widget.h}`"
      :submit="onCropped"
      @close="close"
    />
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, toRefs } from 'vue'

import SignSelectPop from '../sign-select/SignSelectPop.vue'
import SignSpecPop from '../../widgets/seal/SignSpecPop.vue'
import DateSignSettingPop from '../../widgets/date-sign/DateSignSettingPop.vue'
import BatchApply from '../batch-apply/BatchApply.vue'

import useWidgetPopover, { PopoverType } from './useWidgetPopover'
import useChangeSign from '../../widgets/seal/useChangeSign'
import useDateSignSet from '../../widgets/date-sign/useDateSignSet'

/** 弹出层，统一放置方便复用 */
export default defineComponent({
  name: 'ContractPopovers',

  components: { SignSelectPop, SignSpecPop, DateSignSettingPop, BatchApply },

  setup() {
    const popover = useWidgetPopover()

    return {
      /** 弹出层状态 */
      ...toRefs(popover),

      /** 弹出层类型 */
      PopoverType,

      /** 签章配置选项 */
      signOptions: computed(() => popover.viewer.signOptions),

      /** 签章切换 */
      changeSign: useChangeSign(popover),

      /** 日期章设置 */
      dateSignSet: useDateSignSet(popover),

      /** 图片裁剪成功 */
      async onCropped(image: string, file: File) {
        await popover.callback?.(file)
      }
    }
  }
})
</script>

<style lang="scss">
.fa-contract-popovers {
  position: absolute;
  top: 0;
  left: 0;
}
</style>
